<!--预约看房-->
<script setup>
import {ref, onMounted} from 'vue';
import axios from 'axios';
import {message} from 'ant-design-vue';
import {useRouter} from "vue-router";

const router = useRouter();
const houseList = ref([]);
const token = localStorage.getItem("access-token");
const userRole = sessionStorage.getItem("userRole");
// 预约列表
const getCollections = async () => {
  try {
    const response = await axios.get(`${window.link}/user/reserve`, {
      headers: {
        "access-token": token
      }
    });
    console.log(response);

    if (response.data.code === 200) {
      houseList.value = response.data.data;
    } else {
      message.error("获取预约列表失败");
    }
  } catch (error) {
    console.error("获取预约列表失败", error);
    message.error("获取预约列表失败");
  }
};


// 修改取消预约/房东确认函数
const cancelCollection = async (houseId, status) => {
  try {
    const response = await axios.put(`${window.link}/user/reserve/${houseId}`, {}, {
      headers: {
        "access-token": token
      }
    });
    console.log(response)
    if (response.data.code === 200) {
      message.success(response.data.message); // status为false表示取消，true表示确认
      await getCollections(); // 重新获取列表
    } else {
      message.error(response.data.message);
    }
  } catch (error) {
    console.error("操作失败", error);
    message.error("操作失败");
  }
};

// 组件挂载时获取数据
onMounted(() => {
  getCollections();
});

const handleClick = (id) => {
  sessionStorage.setItem("houseId", id);
  router.push("/house");
};
const userStatus = (item)=>{
  if(item.reserve.status === "待看房"){
    return true
  }else{
    return false
  }
}
const statusType = (item)=>{
  if(item.reserve.status === "已取消"){
    return false
  }else{
    return true
  }
}
const videoExtensions = ['mp4', 'webm', 'ogg']
const isVideo = (url) => {
  const extension = url.split('.').pop().toLowerCase()
  return videoExtensions.includes(extension)
}
</script>
<template>
  <div class="min-h-screen  bg-gray-50">
    <div class="w-[1400px] mx-auto py-8 px-4">
      <div class="bg-white rounded-lg shadow-sm p-6">
        <!-- 标题 -->
        <h1 class="text-xl font-medium mb-6">我预约的信息</h1>
        <!-- 房源列表 -->
        <div class="space-y-4">
          <div v-for="(item,index) in houseList" :key="index"
               class="flex bg-white border rounded-lg p-4 hover:shadow-md transition-shadow">
            <!-- 图片部分 -->
            <div class="w-48 h-32 overflow-hidden rounded-lg mr-4">
              <img v-if="!isVideo(item.houseInfo.graphUrl)" :src="item.houseInfo.graphUrl" class="w-full h-full object-cover"/>
              <video v-else :src="item.houseInfo.graphUrl" class="w-full h-full object-cover" :alt="item.houseInfo.title"/>
            </div>
            <!-- 信息部分 -->
            <div class="flex-1 ">
              <h3 class="text-lg font-medium mb-2 hover:text-blue-300 cursor-pointer"
                  @click="handleClick(item.houseInfo.id)">{{ item.houseInfo.title }}</h3>
              <div class="text-sm text-gray-500 mb-2">
                租客名称：{{ item.reserve.name }} <br>
                租客电话：{{ item.reserve.phone }} <br>
                租客要求：{{ item.reserve.remark }}
              </div>
              <div class="flex justify-between items-center mt-4">
                <span class="text-orange-500 text-lg font-medium">{{ item.houseInfo.rent }}元/月</span>
                <div class="space-x-4">
                  <div v-if="userStatus(item)">
                    <a-button
                        type="link" v-if="!userRole"
                        class="!rounded-button"
                        @click="cancelCollection(item.reserve.id,false)"
                    >
                      取消预约
                    </a-button>
                    <a-button
                        type="link" v-if="userRole"
                        class="!rounded-button"
                        @click="cancelCollection(item.reserve.id,true)"
                    >
                      房东确认
                    </a-button>
                  </div>
                  <span v-else>
                    <span class="text-red-600" v-if="!statusType(item)">
                    已取消
                  </span>
                  <span class="text-green-400" v-else>
                    已确认
                  </span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.ant-tag {
  border: none;
  padding: 2px 12px;
  border-radius: 4px;
}
</style>
